<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进思用户列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            white-space:nowrap;
        }
        body{
            background-color: #F3F5F7;
        }
        .layui-col-md11{
            min-width:1207px;
        }
        .layui-table-cell{
            height: inherit;
            line-height: 20px;
        }
        .headerCenter{
            margin-top: 10px;
            margin-left: 20px;
            width: 100%;
        }
        .operation{
            color: #28988B;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .inp{
            width: 160px;
            font-size: 9px;
        }
        .fontsize{
            font-size: 9px;
        }
        .layui-input, .layui-select, .layui-textarea{
            height: 30px;
        }
        .layui-form-label{
            width: 60px;
        }
        .layui-form-item .layui-input-inline{
            margin-right: -10px;
        }

        div#rMenu {
            position: fixed;
            visibility:hidden;
            top:0;
            text-align: left;
            padding:4px;
            width: 100px;
            height: 90px;
        }
        div#rMenu a{
            padding: 5px 30px 5px 30px;
            background-color:#cad4e6;
            /*vertical-align:middle;*/
        }
        .fontColor{
            color: #5FB878;
        }
    </style>
</head>
<body>
    <div class="layui-row" >
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    进思用户列表
                    <div class="btnRight" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                        <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--筛选查询-->
    <div class="layui-row">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                    <button onclick="accurate()" class="btnRight layui-btn layui-btn-sm">
                        高级检索
                    </button>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" id="myFrom">
                        <div class="layui-form-item">
                            <div class="floa">
                                <label class="layui-form-label fontsize" >用户账号：</label>
                                <div class="layui-input-inline" style="margin-right: -30px; padding-right: -30px">
                                    <input type="text" name="account" required lay-verify="required" placeholder="用户账号" autocomplete="off" class="layui-input inp">
                                </div>
                            </div>
                            <div class="floa">
                                <label class="layui-form-label fontsize">用户昵称：</label>
                                <div class="layui-input-inline fontsize inp">
                                    <input type="text" name="nickname" required lay-verify="required" placeholder="用户昵称" autocomplete="off" class="layui-input inp">
                                </div>
                            </div>

                            <label class="layui-form-label fontsize">注册时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" id="test1" name="createDate" required lay-verify="required" placeholder="注册时间" autocomplete="off" class="layui-input inp">
                            </div>

                            <span style="float:right;">
                                    <button onclick="selProduct()" type="button" class="layui-btn layui-btn layui-btn-sm">
                                        <i class="layui-icon layui-icon-search"></i> 搜索
                                    </button>
                                    <button onclick="refresh()" type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-sm">
                                        <i class="layui-icon layui-icon-refresh-1"></i> 重置
                                    </button>
                                </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    进思用户数据列表
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md11" style="margin-left: 19px">
        <table id="demo" lay-filter="test"></table>
    </div>
    <input type="hidden" name="userId"/>
</body>
    <script>
        var form;
        var $;
        var table;
        var layer;
        var upload;
        var laydate;
        layui.use(['laydate','form','jquery','table','layer','upload'],function() {
            form = layui.form;
            laydate = layui.laydate;
            $ = layui.jquery;
            table = layui.table;
            layer = layui.layer;
            upload = layui.upload;

            laydate.render({
                elem: '#test1', //指定元素
                type: 'datetime',
                done: function (value, date, endDate) {
                    createDate = value; //得到日期生成的值，如：2017-08-18
                }
            });
        });

        start();
        //渲染
        function start() {
            $.ajax({
                url:'/UserList/queryJinSiBeforeUser',
                dataType:'json',
                success:function (data) {
                    data = data.data;
                    startTab(data);
                }
            });
        }

        function startTab(data) {
            table.render({
                elem:'#demo',
                page:true,
                data:data,
                cols:[[
                    {checkbox:true},//复选框靠左
                    {title:'序号',width:60,type:'numbers'},
                    {field:"account",title:"用户账号",align:'center'},
                    {field:"nickname",title:"用户昵称",align:'center'},
                    {field:"profession",title:"所学专业",align:'center'},
                    {title:"量化积分",align:'center',templet:function (data) {
                            return data.integration+"分";
                        }},
                    {title:"是否毕业",align:'center',templet:function (data) {
                            if(data.type == 2){
                                return "未毕业";
                            }else{
                                return "已毕业";
                            }
                        }},
                    {field:"entranceDate",title:"入学时间",align:'center'},
                    {title:"状态",align:'center',templet:function (data) {
                            if(data.status == 1 || data.status == 2){
                                return"<input type='checkbox' value='"+data.userId+"' lay-filter='swi' disabled='disabled' lay-skin='switch' lay-text='正常|停用' checked>";
                            }else{
                                return"<input type='checkbox' value='"+data.userId+"' lay-filter='swi' disabled='disabled' lay-skin='switch' lay-text='正常|停用'>";
                            }
                        }},
                    {title:"操作",align:'center',templet:function (data) {
                            return "<a class='fontColor' onclick='viewDetails("+data.userId+")' href='javascript:;'>查看</a> " +
                                "<a class='fontColor' onclick='modifyInformation("+data.userId+")' href='javascript:;'>编译</a>"+
                                " <a class='fontColor' onclick='shutDown(\""+data.userId+"\",\""+data.account+"\",\""+data.status+"\")' href='javascript:;'>封停</a>";
                        }},
                ]]
            });
        }

        //搜索
        function selProduct() {
            var account = $('input[name = account]').val();
            var nickname = $('input[name = nickname]').val();
            var createDate = $('input[name = createDate]').val();
            $.ajax({
                url:'/UserList/queryJinSiBeforeUser',
                dataType:'json',
                data:{"account":account,"nickname":nickname,"createDate":createDate},
                success:function (data) {
                    data = data.data;
                    startTab(data);
                }
            });
        }

        //查看
        function viewDetails(id) {
            $('input[name = userId]').val(id);
            layer.open({
                type:2,
                title:'用户详情',
                content:'/usermodule/view-details.html',
                area:['1000px','470px'],
            });
        }
        //修改
        function modifyInformation(id) {
            $('input[name = userId]').val(id);
            layer.open({
                type:2,
                title:'修改用户详情',
                content:'/usermodule/modify-user-information.html',
                area:['1000px','500px'],
                end:function () {
                    start();
                }
            });
        }
        function refresh() {
            $('#myFrom')[0].reset();
            start();
        }

        function shutDown(id,account,status) {
            if(status == 5){
                layer.msg("该账户已经被封停");
                return;
            }
            layer.open({
                type:2,
                title:'封停用户',
                content:'/usermodule/closure-of-accounts.html',
                area:['500px','400px'],
                success:function (layero,index) {
                    var obj = layero.find('iframe').contents();
                    obj.find("input[name=id]").val(id);
                    obj.find("input[name=account]").val(account);
                    obj.find("#account").val(account);
                }
            });
        }

        //子页面获取路径
        function route() {
            return "/UserList/queryJinSiBeforeUser";
        }

        //高级检索
        function accurate() {
            layer.open({
                type:2,
                title:'高级检索',
                content:'/usermodule/advanced-retrieval.html',
                area:['490px','500px']
            });
        }

        function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }
    </script>
</html>